$(function(){
  const {form} = layui
  initcate()
  
// 初始化富文本编辑器
   initEditor()

  // 定义加载文章分类的方法
  function initcate(){
    $.ajax({
      method:'GET',
      url:'/my/article/cates',
      success:function(res){
          if(res.status!==0){
            layer.msg('获取分类失败!')
          }
          console.log(res);
         const html =  template('tpl-cate',res)
         $('[name=cate_id]').html(html)
         form.render()
      }
    })
  }

// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)

// 选择封面绑定事件
$('#btnChooseImage').on('click',function(){
  $('#coverFile').click()
})

// 监听选择文件的change事件
$('#coverFile').on('change',function(e){
  // 通过e.target.files获取用户选择的文件
   const file =  e.target.files
   // 判断用户是否选择了文件
   if(file.length===0){
     return
   }
       // 根据文件，创建对应的 URL 地址
   const newImgURL = URL.createObjectURL(file[0])
    // 为裁剪区域重新设置图片
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
})

// 定义一个文章状态的变量
let art_status = '已发布'

// 为存为草稿绑定事件
$('#btnSave2').on('click',function(){
  art_status = '草稿'
})


$('#form-pub').on('submit',function(e){
  e.preventDefault()
  const fd = new FormData(this)
  fd.append('state',art_status)
  $image
  .cropper('getCroppedCanvas', {
    // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {
    // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
    // 将文件对象，存储到 fd 中
    fd.append('cover_img', blob)
    // 发起 ajax 数据请求
    publishArticle(fd)
  })
})


function publishArticle(fd) {
  $.ajax({
    method: 'POST',
    url: '/my/article/add',
    data: fd,
    // 注意：如果向服务器提交的是 FormData 格式的数据，
    // 必须添加以下两个配置项
    contentType: false,
    processData: false,
    success: function(res) {
      if (res.status !== 0) {
        return layer.msg('发布文章失败！')
      }
      layer.msg('发布文章成功！')
      // 发布文章成功后，跳转到文章列表页面
      location.href = '../article/list.html'
    }
  })
}

})